<script setup>
import { computed, onMounted, reactive, watch } from 'vue';
import baiyunGeo from "@/assets/baiyun.json";
import axios from 'axios';
import * as echarts from 'echarts';
import * as d3 from 'd3';
import { useStore } from '@/store/useStore';

const store = useStore();

const getToken = () => {
  const params = new URLSearchParams(window.location.search);
  return params.get('authorization');
}
if (getToken()) {
  localStorage.setItem('token', getToken());
}

const loadGeoJson = async () => {
  try {
    //     const res = await axios.get('/baiyun.geojson');
    const res = await axios.get('/bycharts/baiyun.geojson');
    return res.data;
  } catch (error) {
    console.log(error);
    return null;
  }
}
const units = computed(() => store.mapDataKey === 'areas' ? ' 万㎡' : ' 栋');

const projection = d3.geoMercator().scale(1052.63).translate([876, 512]);

const mapOptions = reactive({
  title: {
    text: '区域分布',
    left: '16'
  },
  tooltip: {
    trigger: 'item',
    showDelay: 0,
    transitionDuration: 0.3,
  },
  visualMap: {
    left: 'right',
    min: 500000,
    max: 38000000,
    inRange: {
      color: [
        '#313695',
        '#4575b4',
        '#74add1',
        '#abd9e9',
        '#e0f3f8',
        '#ffffbf',
        '#fee090',
        '#fdae61',
        '#f46d43',
        '#d73027',
        '#a50026'
      ]
    },
    text: ['高', '低'],
    calculable: true
  },
  toolbox: {
    show: true,
    //orient: 'vertical',
    left: 'right',
    top: 'top',
    feature: {
      saveAsImage: {}
    }
  },
  series: [
    {
      name: '广州市白云区',
      type: 'map',
      map: 'BY',
      tooltip: {
        valueFormatter: function (value) {
          return value + units.value;
        }
      },
      projection: {
        project: function (point) {
          return projection(point);
        },
        unproject: function (point) {
          return projection.invert(point);
        }
      },
      emphasis: {
        label: {
          show: true
        },
        itemStyle: {
          areaColor: '#ffffff'
        },
      },
      select: {
        itemStyle: {
          color: '#ffffff'
        }
      },
      data: [
        { name: '景泰街道', value: 0 },
        { name: '金沙街道', value: 0 },
        { name: '同德街道', value: 0 },
        { name: '松洲街道', value: 0 },
        { name: '三元里街道', value: 0 },
        { name: '棠景街道', value: 0 },
        { name: '新市街道', value: 0 },
        { name: '云城街道', value: 0 },
        { name: '黄石街道', value: 0 },
        { name: '石井街道', value: 0 },
        { name: '京溪街道', value: 0 },
        { name: '鹤龙街道', value: 0 },
        { name: '同和街道', value: 0 },
        { name: '石门街道', value: 0 },
        { name: '永平街道', value: 0 },
        { name: '嘉禾街道', value: 0 },
        { name: '白云湖街道', value: 0 },
        { name: '均禾街道', value: 0 },
        { name: '大源街道', value: 0 },
        { name: '龙归街道', value: 0 },
        { name: '太和镇', value: 0 },
        { name: '江高镇', value: 0 },
        { name: '人和镇', value: 0 },
        { name: '钟落潭镇', value: 0 },
      ]
    }
  ]
});

let myChart = null;
watch([() => store.mapByDataZP], () => {
  mapOptions.series[0].data = store.mapByDataZP;
  mapOptions.visualMap.min = Math.min(...mapOptions.series[0].data.map((item) => item.value));
  mapOptions.visualMap.max = Math.max(...mapOptions.series[0].data.map((item) => item.value));
  myChart.dispose();
  myChart = echarts.init(document.getElementById('zp-bymap'));
  myChart.setOption(mapOptions);
}, { deep: true })

watch(() => store.isShowStatistics, (val) => {
  if (val) {
    myChart.dispose();
    myChart = echarts.init(document.getElementById('zp-bymap'));
    // loadGeoJson().then((data) => {
    //   echarts.registerMap('BY', data);
    //
    //   myChart.setOption(mapOptions);
    //   myChart.hideLoading();
    // });
    echarts.registerMap('BY', baiyunGeo);

    myChart.setOption(mapOptions);
    myChart.hideLoading();
  }
});

onMounted(() => {
  myChart = echarts.init(document.getElementById('zp-bymap'));
  // loadGeoJson().then((data) => {
  //   echarts.registerMap('BY', data);
  //
  //   myChart.setOption(mapOptions);
  //   myChart.hideLoading();
  // });
  echarts.registerMap('BY', baiyunGeo);

  myChart.setOption(mapOptions);
  myChart.hideLoading();
})
</script>

<template>
  <div id="zp-bymap"></div>
</template>

<style scoped>
#zp-bymap {
  width: 530px;
  height: 400px;
}
</style>
